<style lang="scss" rel="stylesheet/scss" scoped>
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  }

  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #bbb;
    font-weight: 200;
  }

  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #bbb;
    font-weight: 200;
  }

  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #bbb;
    font-weight: 200;
  }

  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #bbb;
    font-weight: 200;
  }

  .ipt_txt {
    position: relative;
    margin-top: .8rem;
    label {
      line-height: 1.6rem;
      display: block;
      font-size: .75rem;
      color: #3393d4;
    }
    .login_ipt {
      position: relative;
      font-size: .85rem;
      display: block;
      width: 100%;
      line-height: 1.4rem;
      height: 1.4rem;
      padding: .4rem 0;
      /*line-height: 2.2rem;*/
      box-sizing:content-box;
      border-radius: 0;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: 1px #80BCE4 solid;
      background-color: #FFFFFF !important;
      outline: none;
      -webkit-appearance: none !important;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
  }
</style>
<template>
  <div class="ipt_txt">
    <label>{{ title }}</label>
    <!--:placeholder="placeholder?placeholder:'请输入'+ title"-->
    <input :type="type" class="login_ipt"  v-model="value"
           @keyup="keyup" @focus="focus($event)" @blur="blur" :readonly="!!isReadOnly"/>
    <i v-if="showError && correct != null" class="iconfont" :class="correct?'icon-duigou':'icon-close'"></i>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    props: {
      isReadOnly:0,
      placeholder:'',
      title: String,
      type: {
        type: String,
        default: 'text'
      },
      reg: null,
      showError: 0,
      required: 0,
      minLength: null,
      maxLength: null
    },
    data() {
      return {
        value:null,
        correct: null,
        msg: null
      };
    },
    methods: {
      setValue(v){
        this.value = v;
      },
      getValue(){
        return this.value;
      },
      setInfo(correct,msg,code){
        this.correct = correct;
        this.msg = msg;
        this.notifyCheck(code);
      },
      focus(e){
        if(this.isReadOnly){
          this.$emit('focus');
          e.target.blur();
        }else{
          //获得焦点时清除错误
          this.correct = null;
          this.msg = null;
          this.notifyCheck();
          this.$emit('focus');
        }
      },
      blur(){
        this.check();
        this.notifyCheck();
        this.$emit('blur');
      },
      keyup(e){
        if (e.code == 'Enter') {
          this.$emit('click-enter');
        }
      },
      outCheck(){
        this.check();
        this.notifyCheck();
        return this.correct != false;
      },
      check(){
        //非空验证
        if (!this.value) {
          this.correct = !this.required;
          var pre = '请输入';
          if(this.reg == 'username'){
            pre += '您的';
          }
          this.msg = this.correct ? null : pre+this.title;
          return;
        }

        //最小长度验证
        if (this.minLength != null && this.value.length < this.minLength) {
          this.correct = false;
          this.msg = this.title + '长度至少为' + this.minLength + '个字符';
          return;
        }
        //最大长度验证
        if (this.maxLength != null && this.value.length > this.maxLength) {
          this.correct = false;
          this.msg = this.title + '长度不能超过' + this.maxLength + '个字符';
          return;
        }
        var reg = this.reg;
        var regs = this.regs;
        if (reg && regs[reg]) {
          this.correct = regs[reg].test(this.value);
          this.msg = this.correct ? null : '请输入正确的' + this.title;
        } else {
          this.correct = this.showError?true:null;
          this.msg = null;
        }
      },
      notifyCheck(code){
        this.$emit('check', {
          correct: this.correct,
          msg: this.msg,
          code:code
        });
      }
    },
    computed: {
      regs(){
        var regs = this.$store.state.regs;
        var myRegs = {
          phoneOrEmail: {
            test(v){
              return regs.phone.test(v) || regs.email.test(v);
            }
          }
        };
        return Object.assign(regs, myRegs);
      }
    }
  };
</script>
